<template>
	<view class="container">
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change" :active-color="appTheme.checkColor"></u-tabs>
		<order-list v-show="current === 0" payStatus="0"></order-list>
		<order-list v-show="current === 1" payStatus="1"></order-list>
		<!-- <order-list v-show="current === 2" payStatus=""></order-list> -->
		<view v-show="current === 2">
			<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)">
				<view class="info">
					<view class="name">
						{{item.agreement.title}}
					</view>
					<view class="order">
						{{$u.timeFormat(item.agreement.created, 'yyyy年mm月dd日')}}
					</view>
				</view>
				<view class="bal" :class="item.signUrl ? '' : 'sign'">
					{{item.signUrl ? '已签署':'未签署'}}
				</view>
				<u-icon name="arrow-right" color="#A6A6A6" :size="18"></u-icon>
			</view>
		</view>
		
		<u-popup v-model="show" mode="center" border-radius="14">
			<view style="padding: 30rpx; padding-left: 100rpx;padding-right: 100rpx;">
				<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']">
					<u-form-item label="协议文件">
						<u-button type="primary" size="mini" @click="" >查看</u-button>
					</u-form-item>
					<u-form-item label="签署签名">
						<view style="padding: 10rpx;">
							<u-image width="140" height="140" :src="assignImgSVG" @click="startSign">
								<view slot="error" style="font-size: 24rpx;" @click="startSign">签名</view>
							</u-image>
						</view>
					</u-form-item>
					<u-button class="action-view" @click="saveClick">签署</u-button>
				</u-form>
				
				<Signature ref="sig" v-model="assignImgSVG" v-show="signatureShow"></Signature>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import appMixin from '@/mixins/app.js'
	import OrderList from './order-list.vue'
	import Signature from '../components/sin-signature/sin-signature.vue'
	import { getAgreementList, addAgreementRecord } from '@/api/pay.js'
	import { isEmpty } from '@/utils/utils.js'
	export default {
		mixins: [appMixin],
		components: {
			OrderList,
			Signature
		},
		data() {
			return {
				tabList: [{
					name: '未缴'
				}, {
					name: '已缴'
				}, {
					name: '合同'
				}],
				current: 0,
				
				list: [],
				agreement: {},
				show: false,
				form: {
					targetName: '',
					targetId: '',
					targetType: '0',
					content: ''
				},
				rules: {
				},
				assignImgSVG: '',
				signatureShow: false,
				
			}
		},
		onShow() {
			
		},
		onLoad() {
			this.getAgreement()
		},
		methods: {
			change(index) {
				this.current = index;
			},
			
			itemClick(item) {
				if (isEmpty(item.signUrl)) {
					this.agreement = item
					this.show = true
				} else {
					this.openDocument(item.agreement.staticUrl)
				}
			},
			
			async startSign() {
				this.signatureShow = true;
				let s = await this.$refs.sig.getSyncSignature();
				this.form.assignImg = s;
				this.signatureShow = false;
			},
			
			saveClick() {
				if (isEmpty(this.form.assignImg)) {
					this.$u.toast('请填写签名签名')
					return;
				}
				const data = {
					signImageBase64: this.form.assignImg,
					id: this.agreement.id
				}
				uni.showLoading({})
				addAgreementRecord(data).then(res => {
					console.log(res)
					this.$u.toast('签署成功')
					this.form.assignImg = ''
					this.getAgreement();
				}).finally(o => {
					this.show = false
					uni.hideLoading()
				})
			},
			
			getAgreement() {
				getAgreementList().then(res => {
					this.list = res.data.content
				})
			},
			
			openDocument(url) {
				uni.showLoading({title: '正在加载文件'})
				uni.downloadFile({//下载对应文件
				  url: url,
				  success: function (res) {
					console.log(res);
					var filePath = res.tempFilePath;//文件路径
					uni.openDocument({
					  filePath: filePath,//装载对应文件的路径
					  fileType: 'pdf',//指定打开的文件类型
					  success: function (res) {
						console.log("打开成功");
					  },
					  fail: function (res) {
						console.log(res);
					  }
					})
			
				  },
				  fail: function (res) {
					console.log(res);
					this.$u.toast('加载失败')
				  },
				  complete() {
				  	uni.hideLoading()
				  }
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
		
		.item{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			.info{
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				.name{
					
				}
				.order{
					margin-top: 10rpx;
				}
			}
			.bal{
				margin-right: 10rpx;
				margin-left: 10rpx;
				
				.read{
					
				}
				
				.action{
					
				}
				
				.sign{
					color: $app-check-color;
				}
			}
		}
	}
</style>
